<template>
<view style="100%">
<!--<import src="../../common/template.wxml"></import>-->
<!--<import src="template.wxml"></import>-->

<view class="order_contain">
     <view style="width:100%;background:#f2f2f2;">
          <!-- <clearInput inputHint="搜索订单" icon-class="common_search_img" input-class="common_search_input" confirmType="search" :confirmTap="searchEvent"></clearInput> -->
          <view class="header_tab">
               <block v-for="(item, index) in stateList" :key="index">
                    <view :class="selectedIndex == index?'tab_item_selected':'tab_item_default'" @tap="turnPage" :data-index="index" hover-class="tab_item_hover">{{item}}</view>
               </block>
          </view>
     </view>
     <swiper :current="selectedIndex" @change="swiperChange" style="flex:1;height: 90vh;">
          <block data-type="template" data-is="order_list" data-attr="orderList:orderAll,loadEnable:allLoadEnable,common_row:common_row,scrolltolower:'allScrollLower',emptyMessage:allEmpty,currentIndex:1">
						<swiper-item style="height:100%;width:100%;display: flex; justify-content: center; align-content: center;">
							<view v-if="orderAll == undefined || orderAll == null" class="empty_view">
								<image style="width:100rpx;height:100rpx;margin:0 auto;" src="/static/res/images/loading.gif"></image>
								<text style="color:gray;font-size:32rpx;margin-top:16rpx; margin:0 auto;">订单加载中...</text>
							</view>
							<view v-else-if="orderAll.length == 0" class="empty_view">
								<image src="/static/res/images/ic_empty.png" style="width:130rpx;height:130rpx;margin:0 auto" mode="scaleToFill"></image>
								<text style="color:gray;font-size:28rpx; margin:6rpx auto;">{{allEmpty}}</text>
							</view>
							<scroll-view v-else class="common_b2b_scroll" scroll-y="true">
								<view v-for="(item, index) in orderAll" :key="index">
									
									<!--列表item布局  -->
									<uni-card note="true" :title="item.userList[0].nickname === '系统管理员' ? '心选民宿' : item.userList[0].nickname" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/fbbf1487-f518-49cf-9bc9-32a838a6eead.png" :extra="item.create_date" class="card-contain" >
										<navigator  :url="'../purchase_detail/purchase_detail?id=' + item._id" class="module_item">
											<view style="display: flex;flex-direction: row;">
												<view style="width: 30%;height: 240rpx;padding: 10rpx;">
													<image mode="scaleToFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/7f7bfdf6-bade-4abe-96e4-7044e1d6853d.jpg" style="width: 100%;height: 100%;" />
												</view>
												<view style="width: 70%;display: flex;flex-direction: column;padding:20rpx;">
													<view>{{item.hotelName}}</view>
													<view style="font-size: 36rpx;color: #CCCCCC;">
														入住时间：{{item.startDate}}
													</view>
													<view style="font-size: 36rpx;color: #CCCCCC;">
														退房时间：{{item.endDate}}
													</view>
													<view style="font-size: 36rpx;color: #CCCCCC;">
														行程：{{stateList[item.status+1]}}
													</view>
												</view>
											</view>
										</navigator>
										<view style="float: right;">
											<text>合计¥{{item.price}}</text>
										</view>
										<template v-slot:footer>
												<view class="footer-box" style="display: flex;flex-direction: row;flex-flow: row-reverse;">
														<view v-if="item.status==0" style="margin: 10rpx;">
															<button type="primary" :disabled="loadbutton" size="mini" @click="updateOrder(item._id,1)">已入住酒店</button>
														</view>
														<view v-if="item.status==0" style="margin: 10rpx;">
															<button type="warn" :disabled="loadbutton" size="mini" @click="updateOrder(item._id,2)">取消订单</button>
														</view>
														<view v-if="item.status==1 && !item.isComments" style="margin: 10rpx;">
															<button type="default" style="background-color: #f66e26;color: white;border: none;" :disabled="loadbutton" size="mini" plain @click="comment(item)">点评</button>
														</view>
														<view v-if="item.status!=0" style="margin: 10rpx;">
															<button type="default" :disabled="loadbutton" size="mini" plain @click="updateOrder(item._id,3)">删除订单</button>
														</view>
												</view>
										</template>
									</uni-card>
								</view>
							
               <view v-if="loadenable" class="loadmore">
                    <image src="/static/res/images/loading.gif" class="loading" mode="scaleToFill" style="margin:auto 0;"></image>
                    <text style="margin-left:20rpx;">正在加载更多</text>
               </view>
               <text v-else class="loadmore">没有更多数据</text>
          </scroll-view>
     </swiper-item>
</block>
          <block data-type="template" data-is="order_list" data-attr="orderList:orderTodo,loadEnable:todoLoadEnable,common_row:common_row,scrolltolower:'todoScrollLower',emptyMessage:todoEmpty,currentIndex:2">
     <swiper-item style="height:100%;width:100%;display: flex; justify-content: center; align-content: center;">
          <view v-if="orderTodo == undefined || orderTodo == null" class="empty_view">
               <image style="width:100rpx;height:100rpx;margin:0 auto;" src="/static/res/images/loading.gif"></image>
               <text style="color:gray;font-size:32rpx;margin-top:16rpx; margin:0 auto;">订单加载中...</text>
          </view>
          <view v-else-if="orderTodo.length == 0" class="empty_view">
               <image src="/static/res/images/ic_empty.png" style="width:130rpx;height:130rpx;margin:0 auto" mode="scaleToFill"></image>
               <text style="color:gray;font-size:28rpx; margin:6rpx auto;">{{todoEmpty}}</text>
          </view>
          <scroll-view v-else class="common_b2b_scroll" scroll-y="true">
               <view v-for="(item, index) in orderTodo" :key="index">
               	
               	<!--列表item布局  -->
               	<uni-card note="true" :title="item.userList[0].nickname === '系统管理员' ? '心选民宿' : item.userList[0].nickname " thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/fbbf1487-f518-49cf-9bc9-32a838a6eead.png" :extra="item.create_date" class="card-contain" >
               		<navigator  :url="'../purchase_detail/purchase_detail?id=' + item._id + '&state=' + item.billState + '&json=' + item.jsonData + '&index=' + index + '&moduleIndex=' + 4" class="module_item">
               			<view style="display: flex;flex-direction: row;">
               				<view style="width: 30%;height: 240rpx;padding: 10rpx;">
               					<image mode="scaleToFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/7f7bfdf6-bade-4abe-96e4-7044e1d6853d.jpg" style="width: 100%;height: 100%;" />
               				</view>
               				<view style="width: 70%;display: flex;flex-direction: column;padding:20rpx;">
               					<view>{{item.hotelName}}</view>
               					<view style="font-size: 36rpx;color: #CCCCCC;">
               						入住时间：{{item.startDate}}
               					</view>
               					<view style="font-size: 36rpx;color: #CCCCCC;">
               						退房时间：{{item.endDate}}
               					</view>
               					<view style="font-size: 36rpx;color: #CCCCCC;">
               						行程：{{stateList[item.status+1]}}
               					</view>
               				</view>
               			</view>
               		</navigator>
               		<view style="float: right;">
               			<text>合计¥{{item.price}}</text>
               		</view>
               		<template v-slot:footer>
               				<view class="footer-box" style="display: flex;flex-direction: row;flex-flow: row-reverse;">
               						<view v-if="item.status==0" style="margin: 10rpx;">
               							<button type="primary" :disabled="loadbutton" size="mini" @click="updateOrder(item._id,1)">已入住酒店</button>
               						</view>
               						<view v-if="item.status==0" style="margin: 10rpx;">
               							<button type="warn" :disabled="loadbutton" size="mini" @click="updateOrder(item._id,2)">取消订单</button>
               						</view>
               				</view>
               		</template>
               	</uni-card>
               </view>

               <view v-if="loadenable" class="loadmore">
                    <image src="/static/res/images/loading.gif" class="loading" mode="scaleToFill" style="margin:auto 0;"></image>
                    <text style="margin-left:20rpx;">正在加载更多</text>
               </view>
               <text v-else class="loadmore">没有更多数据</text>
          </scroll-view>
     </swiper-item>
</block>
          <block data-type="template" data-is="order_list" data-attr="orderList:orderDone,loadEnable:doneLoadEnable,common_row:common_row,scrolltolower:'doneScrollLower',emptyMessage:doneEmpty,currentIndex:3">
     <swiper-item style="height:100%;width:100%;display: flex; justify-content: center; align-content: center;">
          <view v-if="orderDone == undefined || orderDone == null" class="empty_view">
               <image style="width:100rpx;height:100rpx;margin:0 auto;" src="/static/res/images/loading.gif"></image>
               <text style="color:gray;font-size:32rpx;margin-top:16rpx; margin:0 auto;">订单加载中...</text>
          </view>
          <view v-else-if="orderDone.length == 0" class="empty_view">
               <image src="/static/res/images/ic_empty.png" style="width:130rpx;height:130rpx;margin:0 auto" mode="scaleToFill"></image>
               <text style="color:gray;font-size:28rpx; margin:6rpx auto;">{{doneEmpty}}</text>
          </view>
          <scroll-view v-else class="common_b2b_scroll" scroll-y="true">
               <view v-for="(item, index) in orderDone" :key="index">
               	
               	<!--列表item布局  -->
               	<uni-card note="true" :title="item.userList[0].nickname === '系统管理员' ? '心选民宿' : item.userList[0].nickname " thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/fbbf1487-f518-49cf-9bc9-32a838a6eead.png" :extra="item.create_date" class="card-contain" >
               		<navigator  :url="'../purchase_detail/purchase_detail?id=' + item._id + '&state=' + item.billState + '&json=' + item.jsonData + '&index=' + index + '&moduleIndex=' + 4" class="module_item">
               			<view style="display: flex;flex-direction: row;">
               				<view style="width: 30%;height: 240rpx;padding: 10rpx;">
               					<image mode="scaleToFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/7f7bfdf6-bade-4abe-96e4-7044e1d6853d.jpg" style="width: 100%;height: 100%;" />
               				</view>
               				<view style="width: 70%;display: flex;flex-direction: column;padding:20rpx;">
               					<view>{{item.hotelName}}</view>
               					<view style="font-size: 36rpx;color: #CCCCCC;">
               						入住时间：{{item.startDate}}
               					</view>
               					<view style="font-size: 36rpx;color: #CCCCCC;">
               						退房时间：{{item.endDate}}
               					</view>
               					<view style="font-size: 36rpx;color: #CCCCCC;">
               						行程：{{stateList[item.status+1]}}
               					</view>
               				</view>
               			</view>
               		</navigator>
               		<view style="float: right;">
               			<text>合计¥{{item.price}}</text>
               		</view>
               		<template v-slot:footer>
               				<view class="footer-box" style="display: flex;flex-direction: row;flex-flow: row-reverse;">
               					<view v-if="item.status==1 && !item.isComments" style="margin: 10rpx;">
               						<button type="default" style="background-color: #f66e26;color: white;border: none;" :disabled="loadbutton" size="mini" plain @click="updateOrder(item._id,3)">点评</button>
               					</view>
               					<view v-if="item.status!=0">
               						<button type="default" :disabled="loadbutton" size="mini" plain @click="updateOrder(item._id,3)">删除订单</button>
               					</view>
               				</view>
               		</template>
               	</uni-card>
               </view>

               <view v-if="loadenable" class="loadmore">
                    <image src="/static/res/images/loading.gif" class="loading" mode="scaleToFill" style="margin:auto 0;"></image>
                    <text style="margin-left:20rpx;">正在加载更多</text>
               </view>
               <text v-else class="loadmore">没有更多数据</text>
          </scroll-view>
     </swiper-item>
</block>
          <block data-type="template" data-is="order_list" data-attr="orderList:orderCancel,loadEnable:cancelLoadEnable,common_row:common_row,scrolltolower:'cancelScrollLower',emptyMessage:cancelEmpty,currentIndex:4">
     <swiper-item style="height:100%;width:100%;display: flex; justify-content: center; align-content: center;">
          <view v-if="orderCancel == undefined || orderCancel == null" class="empty_view">
               <image style="width:100rpx;height:100rpx;margin:0 auto;" src="/static/res/images/loading.gif"></image>
               <text style="color:gray;font-size:32rpx;margin-top:16rpx; margin:0 auto;">订单加载中...</text>
          </view>
          <view v-else-if="orderCancel.length == 0" class="empty_view">
               <image src="/static/res/images/ic_empty.png" style="width:130rpx;height:130rpx;margin:0 auto" mode="scaleToFill"></image>
               <text style="color:gray;font-size:28rpx; margin:6rpx auto;">{{cancelEmpty}}</text>
          </view>
          <scroll-view v-else class="common_b2b_scroll" scroll-y="true" >
						<view v-for="(item, index) in orderCancel" :key="index">
							
							<!--列表item布局  -->
							<uni-card note="true" :title="item.userList[0].nickname === '系统管理员' ? '心选民宿' : item.userList[0].nickname " thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/fbbf1487-f518-49cf-9bc9-32a838a6eead.png" :extra="item.create_date" class="card-contain" >
								<navigator  :url="'../purchase_detail/purchase_detail?id=' + item._id + '&state=' + item.billState + '&json=' + item.jsonData + '&index=' + index + '&moduleIndex=' + 4" class="module_item">
									<view style="display: flex;flex-direction: row;">
										<view style="width: 30%;height: 240rpx;padding: 10rpx;">
											<image mode="scaleToFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6052cef6-f129-4a8c-8e83-aa879b54b814/7f7bfdf6-bade-4abe-96e4-7044e1d6853d.jpg" style="width: 100%;height: 100%;" />
										</view>
										<view style="width: 70%;display: flex;flex-direction: column;padding:20rpx;">
											<view>{{item.hotelName}}</view>
											<view style="font-size: 36rpx;color: #CCCCCC;">
												入住时间：{{item.startDate}}
											</view>
											<view style="font-size: 36rpx;color: #CCCCCC;">
												退房时间：{{item.endDate}}
											</view>
											<view style="font-size: 36rpx;color: #CCCCCC;">
												行程：{{stateList[item.status+1]}}
											</view>
										</view>
									</view>
								</navigator>
								<view style="float: right;">
									<text>合计¥{{item.price}}</text>
								</view>
								<template v-slot:footer>
										<view class="footer-box" style="display: flex;flex-direction: row;flex-flow: row-reverse;">
												<view v-if="item.status!=0">
													<button type="default" :disabled="loadbutton" size="mini" plain @click="updateOrder(item._id,3)">删除订单</button>
												</view>
										</view>
								</template>
							</uni-card>
						</view>
               <view v-if="loadenable" class="loadmore">
                    <image src="/static/res/images/loading.gif" class="loading" mode="scaleToFill" style="margin:auto 0;"></image>
                    <text style="margin-left:20rpx;">正在加载更多</text>
               </view>
               <text v-else class="loadmore">没有更多数据</text>
          </scroll-view>
     </swiper-item>
</block>
     </swiper>
</view>
</view>
</template>

<script>
var app = getApp();
import clearInput from "../../components/clearInput/clearInput";
import uniCard from "@/components/uni-card/uni-card.vue";
export default {
  data() {
    return {
      stateList: ["全部", "待入住", "已入住", "已取消"],
      common_row: {
        caption_class: 'caption',
        value_class: 'value'
      },
			loadenable: true ,
			loadbutton: false,
      selectedIndex: 0,
      //数据列表数组
      orderAll: undefined,
      orderTodo: undefined,
      orderDone: undefined,
      orderCancel: undefined,
      //是否可以上拉加载
      allLoadEnable: false,
      todoLoadEnable: false,
      doneLoadEnable: false,
      cancelLoadEnable: false,
      //数据为空或请求失败的提示语
      allEmpty: '全部订单为空',
      todoEmpty: '未入住订单为空',
      doneEmpty: '已入住订单为空',
      cancelEmpty: '已取消订单为空'
    };
  },

  components: {
    clearInput,
		uniCard
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    console.log(options);
    var pageType = options.type;

    if (pageType == 'all') {
      this.setData({
        selectedIndex: 0
      });
    } else if (pageType == 'todo') {
      this.setData({
        selectedIndex: 1
      });
    }

		// 查询订单
		await this.orderList()

   
  },

  methods: {
		orderList(options){
			this.orderAll = undefined
			this.orderTodo = undefined
			this.orderDone = undefined
			this.orderCancel = undefined
			const memberId = app.globalData.userInfo.openid
			uniCloud.callFunction({
				name: 'orderList',
				data: {memberId},
				success: (res) => {
					let {orderAll , orderTodo , orderDone , orderCancel} = res.result.data
					console.log(res.result.data)
					this.orderAll = orderAll
					this.orderTodo = orderTodo
					this.orderDone = orderDone
					this.orderCancel = orderCancel
				},
				complete: () => {
					this.loadenable = false
				}
			})
		},
		
		updateOrder(id,type){
			if(type != 1){
				let message = [0,1,'确认要取消订单吗','确认要删除订单吗']
				uni.showModal({
				    title: '提示',
				    content: message[type],
				    success: (res)=> {
				        if (res.confirm) {
				          // 取消/删除订单操作
				          console.log('取消/删除订单');
									this.orderChange(id,type)
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}else{
				console.log('确认订单');
				this.orderChange(id,type)
			}
		},
		
		comment(item){
			console.log(item)
			const { _id, hotel_id, hotelName, uid, openid } = item
			uni.navigateTo({
				url:"../comment/comment?order_id="+ _id + "&hotel_id="+ hotel_id + "&hotelName=" + hotelName + "&uid=" + uid + "&user_id=" + openid
			})
		},
		
		orderChange(id,type){
			this.loadbutton = true
			let title = [0,'确认','取消','删除'] 
			uni.showLoading({
			    title: title[type] + '中...'
			});
			uniCloud.callFunction({
				name: 'orderChange',
				data: {id,type},
				success: (res) => {
					uni.hideLoading();
					if(res.result.code==0){
						uni.showToast({
						    title: title[type] + '成功',
						    duration: 2000
						});
						setTimeout(()=>{
						   this.orderList()
						}, 1000);
					}
				},
				complete: () => {
					setTimeout(()=>{
					   this.loadbutton = false
					}, 2000);
				}
			})
		},
		
		
    swiperChange: function (e) {
      var detailIndex = e.detail.current;
      var source = e.detail.source;

      if (this.selectedIndex != detailIndex && source == 'touch') {
        this.setData({
          selectedIndex: detailIndex
        });
      }
    },
    turnPage: function (e) {
      var that = this;
      var dataIndex = e.currentTarget.dataset.index;

      if (this.selectedIndex != dataIndex) {
        this.setData({
          selectedIndex: dataIndex
        });
      } else {
        if (this.selectedIndex == 0) {
          this.setData({
            orderAll: null
          });

          wx: setTimeout(function () {
            that.setData({
              orderAll: []
            });
          }, 2000);
        } else if (this.selectedIndex == 1) {
          this.setData({
            orderTodo: null
          });

          wx: setTimeout(function () {
            that.setData({
              orderTodo: []
            });
          }, 2000);
        } else if (this.selectedIndex == 2) {
          this.setData({
            orderDone: null
          });

          wx: setTimeout(function () {
            that.setData({
              orderDone: []
            });
          }, 2000);
        } else if (this.selectedIndex == 3) {
          this.setData({
            orderCancel: null
          });

          wx: setTimeout(function () {
            that.setData({
              orderCancel: []
            });
          }, 2000);
        }
      }
    },

    /**
     * 搜索订单
     */
  //   searchEvent(e) {
		// 	let searchList = []
		// 	switch(this.selectedIndex){
		// 		case 1:
		// 			searchList = this.orderTodo
		// 		break;
		// 		case 2:
		// 			searchList = this.orderDone
		// 		break;
		// 		case 3:
		// 			searchList = this.orderCancel
		// 		break
		// 		default: searchList = this.orderAll
		// 	}
		// 	console.log(e.detail.value, searchList)
		// },

    /**
     * 搜索框输入监听
     */
    inputListener: function (e) {}
  }
};
</script>
<style>
/* pages/orderList/orderList.wxss */

Page {
     width: 100%;
     height: 100%;
}
.card-contain{
	display: flex;
	justify-content: space-between;
}
.order_contain {
     display: flex;
     flex-flow: column;
     flex-direction: column;
     height: 100%;
}

</style>